import { message, Popconfirm, Table, Tag } from "antd";
import { Card as SemiCard, ButtonGroup, Button } from "@douyinfe/semi-ui";
import { IconRefresh } from "@douyinfe/semi-icons";
import { useModel } from "umi";

import useOffShelf from "../../hooks/application/tools/useOffShelf";
import useUpdateShelfStatus from "../../hooks/application/tools/useUpdateShelfStatus";

const { Column } = Table;

const OnShelfApplications = () => {
    const { windowInnerHeight, stateColor } = useModel("global");
    const { appLoading, loadOffShelfApplications, applications } = useOffShelf();
    const { loading: updateLoading, updateShelfStatus } = useUpdateShelfStatus();

    const RenderIsFree = (_) => {
        return _ ? "免费" : "收费";
    };

    const RenderIsOpen = (_) => {
        return _ ? "公开" : "私有";
    };

    const cardBodyHeight = windowInnerHeight - 90 - 54 - 20;

    return (
        <div style={{ padding: 10 }}>
            <SemiCard
                title={<span style={{ lineHeight: "32px", fontSize: 16 }}>已下架应用列表</span>}
                headerExtraContent={
                    <ButtonGroup size={"default"}>
                        <Button icon={<IconRefresh />} onClick={loadOffShelfApplications}></Button>
                    </ButtonGroup>
                }
                headerStyle={{ padding: "10px 14px" }}
                shadows="always"
                bordered={false}
                bodyStyle={{ padding: 0, height: cardBodyHeight }}
            >
                <Table loading={appLoading} size="small" dataSource={applications} rowKey="appUuid" bordered pagination={false} scroll={{ y: cardBodyHeight - 40 }}>
                    <Column title="序号" align="center" width={60} render={(_, r, i) => i + 1} />
                    <Column title="应用名称" dataIndex="appName" align="left" />
                    <Column title="应用分类" dataIndex="atacName" align="left" />
                    <Column
                        title="上下架状态"
                        dataIndex="appStat"
                        width={140}
                        align="center"
                        render={(_, r) => (
                            <Popconfirm
                                title={`确认要上架【${r.appName}】?`}
                                placement="topRight"
                                okButtonProps={{ loading: updateLoading }}
                                onConfirm={(e) => {
                                    updateShelfStatus([r.appUuid], "已上架", (res) => {
                                        if (res) {
                                            message.success("上架成功！");
                                            loadOffShelfApplications();
                                        }
                                    });
                                }}
                            >
                                <Tag color={stateColor[_]}>{_}</Tag>
                            </Popconfirm>
                        )}
                    />
                </Table>
            </SemiCard>
        </div>
    );
};

export default OnShelfApplications;
